<template>
    <template v-for="(row, index) in props.value">
        <!-- 菜单 -->
        <el-menu-item v-if="row.type == 1" :index="row.key">
            <el-icon :size="12">
                <component :is="row.icon" />
            </el-icon>
            <span>{{ row.name }}</span>
        </el-menu-item>
        <!-- 树状 -->
        <el-sub-menu v-if="row.type == 2" :index="row.key">
            <template #title>
                <el-icon :size="12">
                    <component :is="row.icon" />
                </el-icon>
                <span>{{ row.name }}</span>
            </template>
            <Menu :value="row.children" />
        </el-sub-menu>
        <!-- 链接 -->
        <el-menu-item v-if="row.type == 4" :index="row.key">
            <el-icon :size="12">
                <component :is="row.icon" />
            </el-icon>
            <span>{{ row.name }}</span>
        </el-menu-item>
    </template>
</template>

<script setup name="Menu">
import Menu from './Menu.vue';

const props = defineProps({
    value: {
        required: true,
        type: Array
    }
});

onMounted(() => {
});
</script>

<style lang="scss" scoped>
::v-deep .el-sub-menu__title {
    padding: 0 5px;
    height: 42px;
    text-align: left;
    padding-left: 5px !important;

}

::v-deep .el-menu-item {
    padding-left: 15px !important;
}
</style>
